<template>
  <div>
     <!-- 查看详情弹框 -->
    <el-dialog
      :title="title + '角色'"
      :visible.sync="addPermissionsShow"
      width="400px"
      height="500px"
      :before-close="handleCloses"
      append-to-body
      :close-on-click-modal="false"
    >
    <!-- <p class="shopList"></p> -->
      <div class="sousuojg6_10" v-loading="listLoading">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">

          <el-form-item  label="权限名称">
            <el-input v-model="formInline.name" class="inName" placeholder="请输入权限名称"></el-input>
          </el-form-item>
          <br>
          <el-form-item  label="权限标识">
            <el-input v-model="formInline.permission" class="inName" placeholder="请输入权限标识"></el-input>
          </el-form-item>
          <br>
          <el-form-item  label="是否菜单">
            <el-select v-model="formInline.isShow" class="inName" clearable placeholder="请选择">
              <el-option label="是" value="0"></el-option>
              <el-option label="否" value="1"></el-option>
            </el-select>
          </el-form-item>
          <br>
          <el-form-item  label="父级菜单" v-if='title == "编辑"'>
            <el-select  class="inName" v-model="formInline.parentId" clearable placeholder="请选择">
              <el-option v-for="(item, index) in fromData" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <br v-if='title == "编辑"'>
          <el-form-item label-width="66px" label="排序" v-if='title == "编辑"'>
            <el-input class="inName" v-model="formInline.sort" placeholder="请输入序列"></el-input>
          </el-form-item>
          <br v-if='title == "编辑"'>
          <el-form-item  label="链接地址" v-if='title == "编辑"'>
            <el-input class="inName" v-model="formInline.href" placeholder="请输入链接地址"></el-input>
          </el-form-item>
          <!-- <br v-if='title == "编辑"'>
          <el-form-item label-width="80px" label="图标" v-if='title == "编辑"'>
            <el-select v-model="formInline.icon" clearable placeholder="请选择"> -->
              <!-- <el-option label="测试" value="0"></el-option>
              <el-option label="测试试试" value="1"></el-option> -->
            <!-- </el-select>
          </el-form-item> -->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloses">取 消</el-button>
        <el-button type="primary" @click="saveUpdateMenu">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>
<script>
import bus from '../../assets/js/bus'
import https from '../../plugins/https'
import qs from 'qs'
export default {
  props: {
    addPermissionsShow: {
      type: Boolean,
      default() {
          return false
      }
    },
    addPermissionsType: {
      type: Number
    },
    addPermissionsId:{
      type: Number
    }
  },
  data(){
    return{
      formInline: {
        name: '',
        permission: '',
        isShow:'',
        page: 1,
        number: 20,
        oemUid: localStorage.getItem('jurisdiction') == 0 ? localStorage.getItem('uid') : '',
        officeUid: localStorage.getItem('jurisdiction') == 2 ? localStorage.getItem('uid') : '',
      },
      imgData: [],
      totalNum: 0, //总页数
      tableData: [],
      title: '',
      fromData: [],
      listLoading: false
    }
  },
  watch : {
    addPermissionsShow (n) {
      if (n === true) {
        this.title = this.addPermissionsType == 1 ? '添加' : '编辑'
        if (this.addPermissionsType == 2) {
          this.queryMenuDetail()
          this.queryMenuParentIds()
        }
      }
    }
  },
  mounted () {
    // console.log(555, this.eventShow)
  },
  methods:{
    queryMenuParentIds () {
      this.listLoading = true
      https.queryMenuParentIds({id:this.addPermissionsId}).then(res => {
        if (res.data.code !== '0000') {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          return
        }
        this.fromData = res.data.data
        this.listLoading = false
      })
    },
    queryMenuDetail () {
      this.listLoading = true
      https.queryMenuDetail({id:this.addPermissionsId}).then(res => {
        if (res.data.code !== '0000') {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          return
        }
        this.formInline = res.data.data
        // this.formInline.parentId = 1
        this.listLoading = false
      })
    },
    saveUpdateMenu () {
      this.listLoading = true
      https.saveUpdateMenu(this.formInline).then(res => {
        if (res.data.code !== '0000') {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
          // this.$notify({title: "错误",message: res.data.msg,type: "error"});
          this.listLoading = false
          return
        }
        bus.$emit("addPermissionsSuccess", {type:1,show:false})
        layer.open({
            content: res.data.msg,
            skin: "msg",
            time:  2 //1秒后自动关闭
          });
        // this.$notify({title: "成功",message: res.data.msg,type: "success"});
        this.formInline = {
          name: '',
          permission: '',
          isShow:''
        }
        this.listLoading = false
      })
    },
    handleCloses(done) {
      bus.$emit("addPermissionsSuccess", {type:2,show:false})
      this.formInline = {
        name: '',
        permission: '',
        isShow:''
      }
    },
  }
}
</script>
<style scoped>
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}
.pagination {
  margin-top: 10px;
}
 .sousuojg6_10 {
  /* float: left; */
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  /* background-color: #f6f6f6; */
  border-radius: 5px;
}
.shopList {
  width: 100%;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
  font-size: 16px;
  height: 30px;
  margin-bottom: 30px;
}
/deep/ .el-dialog__body{
  height: 300px;
}
/deep/ .el-form--inline{
  height: 250px;
  background: white;
  padding: 0;
}
/deep/ .el-form-item{
  width: 100%;
}
/deep/ .sousuojg6_10{
  background-color: white !important;
}
/deep/ .el-popper{
  min-width:300px !important;
}
/deep/ .inName {
  width: 270px;
}
/deep/ .inName .el-input__inner{
  width: 270px;
}
/deep/ .inName .el-input{
  width: 270px !important;
}
</style>
